{% extends "base_generic.html" %}
{% block script %}
<script type="text/javascript">
$(window).load(
  function() {
    arraymain = new Array();
    arraymain['imagetype']='main';
    imageUploader('mainimage', '{{ filekey }}', 'addImageMain', arraymain);

    arraynormal = new Array();
    arraynormal['imagetype']='normal';
    imageUploader('normalimage', '{{ filekey }}', 'addImage', arraynormal);
    
    loadAvPhotos();
  });

  function addImageMain(key) {
    $(".imgmain").remove();
    var strhtml="<img src=\"/image/" + key + "/\" width=\"215\" class=\"imgmain\" />";
    $('#images').append(strhtml);
  }

  function addImage(key) {
    var strhtml="<img src=\"/image/" + key + "/75/75/cropped/\" width=\"75\" height=\"75\" id=\"" + key + "\" />";
    strhtml += "<a href=\"#\" onclick=\"deleteImage('{{ image.key }}'); return false;\" class=\"image-deleter\" id=\"deleter-{{ image.key }}\">X</a>"
    $('#images').append(strhtml);
  }

  function deleteImage(key) {
    $.post('/admin/image/delete/' + key + '/');
    $('#' + key).remove();
    $('#deleter-' + key).remove();
  }
  
  function selectPhoto(fileId) {
    if ($('#photo' + fileId).hasClass('available')){
      $.post('/admin/galleries/photo/select/' + fileId + '/{{ galleryId }}/');
      $('#photo' + fileId).css('border', '1px solid red');
      $('#photo' + fileId).removeClass('available');
      $('#photo' + fileId).addClass('notavailable');
    } else {
      $.post('/admin/galleries/photo/unselect/' + fileId + '/{{ galleryId }}/');
      $('#photo' + fileId).css('border', '0');
      $('#photo' + fileId).removeClass('notavailable');
      $('#photo' + fileId).addClass('available');
    }
  }

  function mainPhoto(fileId) {
    $.post('/admin/galleries/photo/main/' + fileId + '/{{ galleryId }}/');
  }
  
  function loadAvPhotos() {
    $.get('/admin/galleries/photos/{{ category }}/available/', function(data) {
      $('#avPhotos').html(data);
    });
  }
</script>
{% endblock %}
{% block content %}
        <h1>Gallery</h1>
        <p><a href="/hotguyspixs">hot guys pixs</a> - <a href="/hotguyspixs">hot girls pixs</a> - <a href="/funnypics">funny pics</a></p>
        
        <form action="/admin/galleries/{{ galleryId }}/save/" method="post">
        
        <div class="line">
          <div class="field">
            <label>Title:</label>
            <input id="title" title="title" type="text" name="title" size="65" value="{{ title }}" />
          </div>
        </div>
        <div class="line">
          <div class="field">
            <label>Category:</label>
            <select name="category" id="category">
              <option value="funny">Funny</option>
              <option value="hot">Hot</option>
              <option value="gross">Gross</option>
              <option value="odd">Odd</option>
              <option value="wow">Wow</option>
              <option value="beautiful">Beautiful</option>
              <option value="man">Man</option>
              <option value="woman">Woman</option>
            </select>
          </div>
        </div>
        <div class="line">
           <div class="field" id="categories">
             {% for tag in tags %}
              <label>
                <input type="checkbox" value="{{ tag.slug }}" name="tag"
                {% for jokeTag in jokeTags %}
                  {% ifequal tag.slug jokeTag %} checked="checked"{% endifequal %}
                {% endfor %}
                /> {{ tag.name }}</label>
             {% endfor %}
           </div>
        </div>
        
        <div class="line">
          {% for photo in photos %}
          <img src="/image/{{ photo.fileId }}/" width="80" id="photo{{ photo.fileId }}" onclick="selectPhoto({{ photo.fileId }})" class="available" /><a href="#" onclick="mainPhoto({{ photo.fileId }})">main</a>
          {% endfor %}
        </div>

        <div class="line">
          <div class="field">
            <label for="mainimage">Thumbnail:</label>
            <div id="mainimage" class="inputimg"></div>
          </div>
          <!--<div class="field">
            <label for="normalimage">Photos:</label>
            <div id="normalimage" class="inputimg"></div>
          </div>
          <br class="clear" />
          <div id="images">
            {% if imagekey %}
            <img src="/image/{{ imagekey }}/" width="215" class="imgmain" />
            {% endif %}
            {% for image in normalimages %}
              <img src="/image/{{ image.key }}/75/75/cropped/" width="75" height="75" id="{{ image.key }}" />
              <a href="#" onclick="deleteImage('{{ image.key }}'); return false;" class="image-deleter" id="deleter-{{ image.key }}">X</a>
            {% endfor %}
          </div> -->
        </div>
        
        <div id="avPhotos">
        </div>
        
        <input type="submit" value="Guardar" id="save" name="save" title="save" /><br class="clear" />
      </form>
      <br class="clear" />

{% endblock %}
      